import React, { useEffect, useState } from 'react';
import {
  Modal,
  Form,
  Button,
  Typography,
  InputNumber,
  Space,
} from '@arco-design/web-react';
import {
  RechargeType,
  PayWayType,
} from '@/pages/telepathy/educationTelepathy/enum';
import styles from './style/index.module.less';
import AlipayIcon from '@/assets/alipay.svg';
import WechatPayIcon from '@/assets/wechat-pay.svg';

const { Text } = Typography;

interface customFormData extends FormData {
  rechargeValue?: string;
}
interface Props {
  visible: boolean;
  title: string;
  handleChangeVisible: (visible: boolean) => void;
  onConfirm: (vlaue: any) => void;
}

function RechargeForm(props: Props) {
  const { visible, handleChangeVisible, onConfirm, title } = props;
  const [form] = Form.useForm();
  const FormItem = Form.Item;
  const [payment, setPayment] = useState(0);

  const changeVisible = () => {
    handleChangeVisible(false);
  };

  const toPay = (payWay: PayWayType) => {
    form.validate().then((value) => {
      changeVisible();
      onConfirm && onConfirm({ ...value, payWay });
    });
  };

  useEffect(() => {
    form.resetFields();
  }, [visible]);

  const handleValuesChange = (
    value: Partial<customFormData>,
    values: Partial<customFormData>
  ) => {
    const rechargeValue = values.rechargeValue
      ? Number(value.rechargeValue)
      : 0;

    setPayment(rechargeValue);
  };

  return (
    <Modal
      title={title}
      visible={visible}
      autoFocus={false}
      focusLock={false}
      onCancel={changeVisible}
      footer={null}
      style={{ width: '600px' }}
    >
      <Form form={form} onValuesChange={handleValuesChange}>
        <FormItem
          label={title}
          field="rechargeValue"
          rules={[
            {
              required: true,
              validator(value, callback) {
                if (!value) {
                  return callback('请输入');
                }
                if (!(Math.floor(value) === value && value > 0)) {
                  return callback('请输入正整数');
                }
                return callback();
              },
            },
          ]}
        >
          <InputNumber placeholder="请输入" autoComplete="off" max={10000000} />
        </FormItem>

        <FormItem label="实付">
          <Text>￥{payment}</Text>
        </FormItem>

        <FormItem label="支付方式">
          <Space size="small">
            <div
              className={styles['pay-way-item']}
              onClick={() => toPay(PayWayType.aliPay)}
            >
              <AlipayIcon className={styles['pay-way-icon']} />
              <div>支付宝</div>
            </div>
            <div
              className={styles['pay-way-item']}
              onClick={() => toPay(PayWayType.wechatPay)}
            >
              <WechatPayIcon className={styles['pay-way-icon']} />
              <div>微信</div>
            </div>
          </Space>
        </FormItem>
      </Form>
    </Modal>
  );
}

export default RechargeForm;
